<!--
 * @Description: 栏舍管理
 * @Author: Ronda
 * @Date: 2022-03-23 11:27:07
 * @LastEditors: Ronda
 * @LastEditTime: 2023-06-24 23:35:02
-->

<template>
    <!-- 栏舍管理 -->
    <div>
        <!-- {{ authsButton }} -->
        <el-row :gutter="20">
            <!-- 表格和分页 -->
            <el-col :span="tableSpan">
                <div class="btns">
                    <el-form :inline="true" size="small">
                        <el-button
                            v-if="
                authsButton.filter(item => {
                  return item.perms === perms.saveOrUpdate;
                }).length > 0
              "
                            type="primary"
                            size="small"
                            @click="toAdd"
                        >添加
                        </el-button
                        >
                        <el-button
                            v-if="
                authsButton.filter(item => {
                  return item.perms === perms.deleteAll;
                }).length > 0
              "
                            type="danger"
                            size="small"
                            style="margin-right: 10px"
                            @click="toBatchDelete"
                        >批量删除
                        </el-button
                        >
                        <el-form-item>
                            <el-input
                                v-model="param.fhName"
                                placeholder="请输入名称"
                                clearable
                            />
                        </el-form-item>
                        <el-button type="text" size="mini" @click="loadFenceHouse(1)"
                        >搜索
                        </el-button
                        >
                    </el-form>
                </div>
                <el-table
                    v-loading="loading"
                    border
                    :data="fenceHouse.list"
                    size="small"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column
                        align="center"
                        type="index"
                        :index="1"
                        label="序号"
                    />
                    <el-table-column prop="fhId" label="编号" width="250"/>
                    <el-table-column prop="fhName" label="名称" width="100"/>
                    <el-table-column prop="fhTime" label="创建时间" width="160"/>
                    <!-- <el-table-column
                      prop="fhDelete"
                      label="状态"
                      width="60px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.fhDelete == 0" size="mini">启用</el-tag>
                        <el-tag v-else size="mini" type="danger">禁用</el-tag>
                      </template>
                    </el-table-column> -->
                    <el-table-column prop="fhDesc" label="描述" align="left"/>
                    <el-table-column label="操作" align="center" width="140">
                        <template slot-scope="scope">
                            <!--  v-if="
                                scope.row.fhDelete == 0 &&
                                  authsButton.filter(item => {
                                    return item.perms === perms.delete;
                                  }).length > 0
                              " -->
                            <el-button
                                type="text"
                                size="mini"
                                @click.prevent="toDelete(scope.row.fhId)"
                            >移除
                            </el-button
                            >
                            <!-- v-if=" scope.row.fhDelete == 0 && authsButton.filter(item => {
                            return item.perms === perms.saveOrUpdate; }).length > 0 " -->
                            <el-button
                                type="text"
                                size="mini"
                                @click.prevent="toEdit(scope.row)"
                            >修改
                            </el-button
                            >
                            <!-- v-if="
                                scope.row.fhDelete == 0 &&
                                  authsButton.filter(item => {
                                    return item.perms === perms.details;
                                  }).length > 0
                              " -->
                            <el-button
                                type="text"
                                size="mini"
                                @click.prevent="toDetails(scope.row.fhId)"
                            >详情
                            </el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="page">
                    <!-- :hide-on-single-page="true" -->
                    <el-pagination
                        background
                        layout="total,prev, pager, next,sizes"
                        small
                        :total="fenceHouse.total"
                        :page-size="param.pageSize"
                        :current-page="param.pageNum"
                        :page-sizes="[2, 10, 15, 30, 50, 80]"
                        @current-change="currentChangeHandler"
                        @size-change="sizeChangeHandler"
                    />
                </div>
                <!-- 分页 -->
            </el-col>
            <!-- 详情 -->
            <el-col v-if="detailsVisible" :span="detailsSpan">
                <el-card v-loading="detailsLoading" class="box-card" size="mini">
                    <div slot="header" class="clearfix">
                        <span>【{{ details.fhName }}】栏舍详情</span>
                        <el-button
                            style="float: right; padding: 3px 0"
                            type="text"
                            @click="toCancelDetails"
                        >隐藏
                        </el-button
                        >
                    </div>
                    <div>栏舍描述：{{ details.fhDesc }}</div>
                    <div>
                        栏圈信息：
                        <el-table :data="details.mhs" size="small" empty-text="暂无数据">
                            <el-table-column prop="hName" label="栏圈名称" align="left"/>
                            <el-table-column prop="hMax" label="容量" align="left"/>
                            <el-table-column prop="hDesc" label="栏圈描述" align="left"/>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 抽屉 添加和修改栏舍信息 -->
        <Briupdrawer
            :drawer-visible="visible"
            :title="title"
            width="40%"
            @on-change-visible="handlerVisibleChange"
        >
            <div slot="content">
                <el-form ref="fenceHouse_form" :model="form" :rules="rules">
                    <el-form-item label="名称" label-width="80px" prop="fhName">
                        <el-input
                            v-if="form.id"
                            v-model="form.fhName"
                            autocomplete="off"
                            disabled
                        />
                        <el-input v-else v-model="form.fhName" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="创建时间" label-width="80px" prop="fhTime">
                        <el-date-picker
                            v-model="form.fhTime"
                            type="datetime"
                            placeholder="选择创建时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                        />
                    </el-form-item>
                    <el-form-item label="描述" label-width="80px" prop="fhDesc">
                        <el-input
                            v-model="form.fhDesc"
                            type="textarea"
                            :rows="2"
                            autocomplete="off"
                        />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handlerVisibleChange(false)"
        >取 消</el-button
        >
        <el-button type="primary" size="small" @click="toSave">确 定</el-button>
      </span>
        </Briupdrawer>
        <!-- 抽屉结束 -->
    </div>
</template>
<script>
import {
    findByOption,
    saveOrUpdate,
    delById,
    deleteByIdAll,
    findById
} from '@/api/ptsBase/fenceHouse'
// 按钮权限
import { getSubsByUrl, authsPerms } from '@/utils/common'

export default {
    data() {
        return {
            // 静态按钮权限列表
            perms: authsPerms.fenceHouse,
            // 当前页面的按钮权限
            authsButton: [],
            // 新增和修改栏舍的数据
            form: {},
            loading: false,
            detailsLoading: false,
            // 新增和修改模态框
            visible: false,
            // 详情面板是否显示
            detailsVisible: false,
            // 表格面板比例
            tableSpan: 24,
            detailsSpan: 0,
            // 标题
            title: '添加栏舍信息',
            // 栏舍数据
            fenceHouse: [],
            // 批量禁用的数据
            ids: [],
            // 详情数据
            details: {},
            // 搜索的数据
            param: {
                pageNum: 1,
                pageSize: 10
            },
            rules: {
                fhName: [{ required: true, message: '请输入名称', trigger: 'change' }],
                fhTime: [
                    {
                        type: 'string',
                        required: true,
                        message: '请选择创建时间',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    created() {
        // 通过当前页面的路由获取页面的按钮权限
        // 按钮权限
        this.authsButton = getSubsByUrl(this.$route.path).subs
        // 加载数据
        this.loadFenceHouse()
    },
    methods: {
        /**
         * @description: 加载栏舍信息
         * @param {*}
         * @return {*}
         */
        async loadFenceHouse(pageNum) {
            if (pageNum) {
                this.param.pageNum = pageNum
            }
            this.loading = true
            const res = await findByOption(this.param)
            this.fenceHouse = res.data
            this.loading = false
        },
        /**
         * @description: 添加按钮
         * @param {*}
         * @return {*}
         */
        toAdd() {
            this.form = {}
            this.title = '添加栏舍信息'
            this.visible = true
        },
        /**
         * @description: 修改按钮
         * @param {*} record
         * @return {*}
         */
        toEdit(record) {
            this.form = { ...record }
            this.title = '修改栏舍信息'
            this.visible = true
        },
        /**
         * @description: 保存栏舍信息
         * @param {*}
         * @return {*}
         */
        toSave() {
            this.$refs['fenceHouse_form'].validate(async valid => {
                if (valid) {
                    const res = await saveOrUpdate(this.form)
                    this.handlerVisibleChange(false)
                    this.$message({ message: res.message, type: 'success' })
                    if (this.title === '添加栏舍信息') {
                        // 处理分页bug
                        this.loadFenceHouse(1)
                    } else {
                        this.loadFenceHouse()
                    }
                } else {
                    return false
                }
            })
        },
        /**
         * @description: 查看详情
         * @param {*} id
         * @return {*}
         */
        async toDetails(id) {
            this.tableSpan = 17
            this.detailsSpan = 7
            this.detailsVisible = true
            this.detailsLoading = true
            const res = await findById(id)
            this.details = res.data
            this.detailsLoading = false
        },
        /**
         * @description: 隐藏详情内容
         * @param {*}
         * @return {*}
         */
        toCancelDetails() {
            this.tableSpan = 24
            this.detailsSpan = 0
            this.detailsVisible = false
        },
        /**
         * @description: 禁用栏舍
         * @param {*} id 账户id
         * @return {*}
         */
        toDelete(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                const res = await delById(id)
                this.$message({ type: 'success', message: res.message })
                this.loadFenceHouse()
            })
        },
        /**
         * @description: 批量禁用栏舍
         * @param {*}
         * @return {*}
         */
        toBatchDelete() {
            if (this.ids.length > 0) {
                this.$confirm('此操作将批量删除选中的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                    const res = await deleteByIdAll(this.ids)
                    this.$message({ type: 'success', message: res.message })
                    this.loadFenceHouse()
                })
            } else {
                this.$message({ type: 'warning', message: '请选择要批量删除的数据' })
            }
        },
        /**
         * @description: 当前页发生改变
         * @param {*} page
         * @return {*}
         */
        currentChangeHandler(pageNum) {
            this.param.pageNum = pageNum
            this.loadFenceHouse()
        },
        /**
         * @description: 条数发生变化
         * @param {*} pageSize 条数
         * @return {*}
         */
        sizeChangeHandler(pageSize) {
            this.param.pageNum = 1
            this.param.pageSize = pageSize
            this.loadFenceHouse()
        },
        /**
         * @description: 表格多选切换
         * @param {*} val
         * @return {*}
         */
        handleSelectionChange(val) {
            this.ids = val.map(item => item.fhId)
        },
        /**
         * @description: 处理visible变化的钩子函数,解决抽屉无法收缩的bug
         * @param {*} val
         * @return {*}
         */
        handlerVisibleChange(val) {
            this.visible = val
            this.$refs['fenceHouse_form'].resetFields()
        }
    }
}
</script>
<style scoped lang="scss"></style>
